﻿<html>
<head>
    <link rel="StyleSheet" href="styles/popup.css" type="text/css">
	<script type="text/javascript" src="script/util.js"></script>
	<script type="text/javascript" src="script/popup.js"></script>    
	<script type="text/javascript">
		$(document).ready(function(){
			$(".stations a").removeClass('chosen');
			storage = new Storage();

			loadSkin();
			loadStations();

			$("#slider").slider({ min: 0, max: 100, step: 1, value: getState().Volume * 100, animate: false, slide: function(event, ui) { getState().SetVolume(ui.value / 100) } });
			$(".play").click(function() { getState().PPlay(); $(".play").toggleClass("pause", getState()._current.Playing()); });
			$(".stop").click(function() { getState().Stop(); $(".stations a").removeClass('chosen'); });
			$(".next").click(function() { getState().Next(); });
});
	</script>
</head>
<body>
	<div class="player">
		<div class="albumloading"></div>
		<div class="albumimage"></div>
		<div class="info">
			<a class="title"></a>
			<a class="album"></a>
			<a class="artist"></a>
		</div>
		<div class="controls">
			<a class="play"></a>
			<a class="next"></a>
			<a class="stop"></a>
			<div id="slider"></div>
		</div>
	</div>

	<div class="stationswrapper">
		<div class="stations">
		</div>
	</div>
</body>
</html>
